// function qs(ele) {
//     return document.querySelector(ele)
// }

// 接口地址：https://www.apifox.cn/apidoc/shared-36f0cbc0-9064-44bc-850a-805e263bf494/api-25827426
//通过ajax获取省市区的数据 map+join+innerHTML
//默认选择河南 去设置下拉框值为河南省 value
const qs = (element) => document.querySelector(element)
axios.defaults.baseURL = 'http://124.223.14.236:3001/api'
async function init() {
    const { data: res } = await axios.get('/city/province')
    const provinceStr = res.data.map((item) => `<option value="${item.province}">${item.name}</option>
    `).join('')
    qs('#province').innerHTML = `<option value="">请选择省份</option>` + provinceStr
    qs('#province').value = 41
    //河南省下市的数据
    const {
        data: { data: cityData },
    } = await axios.get('/city/city', {
        params: {
            provinceCode: '41',
        },
    })
    console.log(cityData);
    const cityStr = cityData.map((item) => `<option value="${item.city}">${item.name}</option>`).join('')
    qs('#city').innerHTML = `<option value="">请选择城市</option>` + cityStr
    qs('#city').value = '01'
    //郑州市下区的数据
    const {
        data: { data: areaData },
    } = await axios.get('/city/area', {
        params: {
            provinceCode: '41',
            cityCode: '01'
        },
    })
    console.log(areaData);
    const areaStr = areaData.map((item) => `<option value="${item.area}">${item.name}</option>`).join('')
    qs('#county').innerHTML = `<option value="">请选择区县</option>` + areaStr
    qs('#county').value = '02'

}
init()
//省发生改变获取对应的数据
qs('#province').addEventListener('change', async function () {
    console.log(this.value);
    const {
        data: { data: cityData },
    } = await axios.get('/city/city', {
        params: {
            provinceCode: this.value,
        },
    })
    // console.log(cityData);
    const cityStr = cityData.map((item) => `<option value="${item.city}">${item.name}</option>`).join('')
    qs('#city').innerHTML = `<option value="">请选择城市</option>` + cityStr
    //重置区的数据
    qs('#county').innerHTML = `<option value="">请选择区县</option>`
})
//市发生改变获取对应县的数据
qs('#city').addEventListener('change', async function () {
    console.log(this.value);
    const {
        data: { data: areaData },
    } = await axios.get('/city/area', {
        params: {
            provinceCode: qs('#province').value,
            cityCode: qs('#city').value
        },
    })
    // console.log(areaData);
    const areaStr = areaData.map((item) => `<option value="${item.area}">${item.name}</option>`).join('')
    qs('#county').innerHTML = `<option value="">请选择区县</option>` + areaStr
})
